<template>
  <div id="wordCloud" ref="wordCloud">
    <div class="bpm-title">
      {{ title }}
    </div>
    <div ref="canvasContainer"></div>
  </div>
</template>
<script>
import zrender from "zrender";

export default {
  props: {
    data: {
      type: Array,
    },
    title: {
      type: String,
      default: "",
    },
    speed: {
      type: Number,
      default: 200,
    },
    motionTime: {
      type: Number,
      default: 25,
    },
  },
  data() {
    return {
      width: 400,
      height: 400,
      RADIUS: 100,
      speedX: Math.PI / 360,
      speedY: Math.PI / 360,
      tags: [],
      zr: null,
      textTags: [],
    };
  },
  computed: {
    CX() {
      //球心x坐标
      return this.width / 2;
    },
    CY() {
      //球心y坐标
      return this.height / 2;
    },
  },
  watch: {
    data() {
      this.drawCloud();
    },
  },
  beforeDestroy() {
    if (this.zr) {
      this.zr.dispose();
    }
  },
  mounted() {
    //初始化标签位置
    this.width =
      this.$refs.wordCloud.clientWidth - 20 <= 0
        ? 500
        : this.$refs.wordCloud.clientWidth - 20;
    this.height =
      this.$refs.wordCloud.clientHeight - 30 <= 0
        ? 500
        : this.$refs.wordCloud.clientHeight - 30;
    this.RADIUS = this.height / 2;
    this.zr = zrender.init(this.$refs.canvasContainer, {
      width: this.width,
      height: this.height,
    });
    this.zr.off("mousemove");
    this.zr.on("mousemove", (event) => {
      this.listener(event);
    });
    this.drawCloud();
  },
  methods: {
    drawCloud() {
      this.zr && this.zr.clear();
      this.textTags = [];
      this.tags = (this.data || []).map((ele, index, arr) => {
        const tag = {
          style: {
            x: 0,
            y: 0,
            z: 0,
          },
          bindData: ele,
        };
        const k = -1 + (2 * (index + 1) - 1) / arr.length;
        const a = Math.acos(k);
        const b = a * Math.sqrt(arr.length * Math.PI); //计算标签相对于球心的角度
        tag.style.text = ele.code;
        tag.style.x = this.CX + this.RADIUS * Math.sin(a) * Math.cos(b); //根据标签角度求出标签的x,y,z坐标
        tag.style.y = this.CY + this.RADIUS * Math.sin(a) * Math.sin(b);
        tag.style.z = this.RADIUS * Math.cos(a);
        tag.style.fontSize = Math.ceil(
          12 + ((ele.hotValue / 999999) * 100) / 10
        );
        tag.style.textFill = this.color(tag.style.fontSize);
        return tag;
      });
      this.tags.forEach((tag) => {
        const text = new zrender.Text(tag);
        this.zr.add(text);
        text.__tag = tag;
        this.textTags.push(text);
        text.off("click").on("click", () => {
          console.log(text.__tag.bindData);
          this.$emit("tag-click", text.__tag.bindData);
        });
        text.off("mouseover").on("mouseover", () => {
          text.__mouseover = true;
          text.attr({
            style: {
              textShadowBlur: 10, //文字阴影模糊度
              textShadowColor: "#333", //文字阴影颜色
            },
          });
        });
        text.off("mouseout").on("mouseout", () => {
          if (text.__mouseover) {
             text.__mouseover = false;
             this.motion(text);
          }
          text.attr({
            style: {
              textShadowBlur: 0, //文字阴影模糊度
              textShadowColor: "transparent", //文字阴影颜色
            },
          });
        });
        this.motion(text);
      });
    },
    color(fontSize) {
      return `rgba(${Math.round(Math.random() * 255)},${Math.round(
        Math.random() * 255
      )},${Math.round(Math.random() * 255)},${(400 + fontSize) / 600})`;
    },
    motion(textTag) {
      if (!textTag.__mouseover) {
        this.rotateX(this.speedX, textTag.__tag.style);
        this.rotateY(this.speedY, textTag.__tag.style);
        textTag
          .animate("style", false)
          .when(this.motionTime, {
            x: textTag.__tag.style.x,
            y: textTag.__tag.style.y,
          })
          .done(() => {
            this.motion(textTag);
          })
          .start();
      }
    },
    rotateX(angleX, style) {
      const cos = Math.cos(Math.PI / 360);
      const sin = Math.sin(Math.PI / 360);
      style.y = (style.y - this.CY) * cos - style.z * sin + this.CY;
      style.z = style.z * cos + (style.y - this.CY) * sin;
    },
    rotateY(angleY, style) {
      const cos = Math.cos(angleY);
      const sin = Math.sin(angleY);
      style.x = (style.x - this.CX) * cos - style.z * sin + this.CX;
      style.z = style.z * cos + (style.x - this.CX) * sin;
    },
    listener(event) {
      //响应鼠标移动
      const x = event.offsetX - this.CX;
      const y = event.offsetY - this.CY;
      this.speedX =
        x * 0.0001 > 0
          ? Math.min(this.RADIUS * 0.00002, x * 0.0001)
          : Math.max(-this.RADIUS * 0.00002, x * 0.0001);
      this.speedY =
        y * 0.0001 > 0
          ? Math.min(this.RADIUS * 0.00002, y * 0.0001)
          : Math.max(-this.RADIUS * 0.00002, y * 0.0001);
    },
  },
};
</script>
<style scoped>
</style>
